<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Toolbars in PyGTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, PyGTK, toolbars, Python, programming, Linux">
<meta name="description" content="Toolbars in PyGTK">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>  

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Toolbars in PyGTK</h1>

<p>
In this part of the PyGTK programming tutorial, we will work with toolbars.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>


<p>
Menus group commands that we can use in application. 
Toolbars provide a quick access to the most frequently used commands. 
</p>


<h2>Simple toolbar</h2>

<p>
Next we create a simple toolbar. 
</p>

<div class="codehead">toolbar.py</div>
<pre class="code"> 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows a toolbar
# widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Toolbar")
        self.set_size_request(250, 200)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        toolbar = gtk.Toolbar()
        toolbar.set_style(gtk.TOOLBAR_ICONS)

        newtb = gtk.ToolButton(gtk.STOCK_NEW)
        opentb = gtk.ToolButton(gtk.STOCK_OPEN)
        savetb = gtk.ToolButton(gtk.STOCK_SAVE)
        sep = gtk.SeparatorToolItem()
        quittb = gtk.ToolButton(gtk.STOCK_QUIT)

        toolbar.insert(newtb, 0)
        toolbar.insert(opentb, 1)
        toolbar.insert(savetb, 2)
        toolbar.insert(sep, 3)
        toolbar.insert(quittb, 4)
        
        quittb.connect("clicked", gtk.main_quit)

        vbox = gtk.VBox(False, 2)
        vbox.pack_start(toolbar, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        
       
PyApp()
gtk.main()
</pre>

<p>
The example shows a toolbar and four tool buttons. 
</p>

<pre class="explanation">
 toolbar = gtk.Toolbar()
</pre>

<p>
A <b class="keyword">Toolbar</b> widget is created. 
</p>

<pre class="explanation">
 toolbar.set_style(gtk.TOOLBAR_ICONS)
</pre>

<p>
On toolbar, we show only icons. No text. 
</p>

<pre class="explanation">
 newtb = gtk.ToolButton(gtk.STOCK_NEW)
</pre>

<p>
A <b class="keyword">ToolButton</b> with an image from
stock is created. 
</p>

<pre class="explanation">
 sep = gtk.SeparatorToolItem()
</pre>

<p>
This is a separator. It can be used to group toolbar buttons
into logical groups. 
</p>

<pre class="explanation">
 toolbar.insert(newtb, 0)
 toolbar.insert(opentb, 1)
 ...
</pre>

<p>
Toolbar buttons are inserted into the toolbar widget. 
</p>


<br>
<img src="/img/gui/pygtk/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>
<br>


<h2>Toolbars</h2>

<p>
In the second example, we show two toolbars. Many applications 
have more than one toolbar. 
We show, how we can do it in PyGTK. 
</p>

<div class="codehead">toolbars.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows two toolbars
# in the application window
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Toolbars")
        self.set_size_request(350, 300)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        upper = gtk.Toolbar()
        upper.set_style(gtk.TOOLBAR_ICONS)

        newtb = gtk.ToolButton(gtk.STOCK_NEW)
        opentb = gtk.ToolButton(gtk.STOCK_OPEN)
        savetb = gtk.ToolButton(gtk.STOCK_SAVE)

        upper.insert(newtb, 0)
        upper.insert(opentb, 1)
        upper.insert(savetb, 2)

        lower = gtk.Toolbar()
        lower.set_style(gtk.TOOLBAR_ICONS)

        quittb = gtk.ToolButton(gtk.STOCK_QUIT)
        quittb.connect("clicked", gtk.main_quit)
        lower.insert(quittb, 0)
         
        vbox = gtk.VBox(False, 0)
        vbox.pack_start(upper, False, False, 0)
        vbox.pack_start(lower, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        
       
PyApp()
gtk.main()
</pre>

<p>
Our applications shows two toolbars. 
</p>

<pre class="explanation">
 upper = gtk.Toolbar()
 ...
 lower = gtk.Toolbar()
</pre>

<p>
We create two <b class="keyword">Toolbar</b> widgets. 
</p>

<pre class="explanation">
 upper.insert(newtb, 0)
 ...
 lower.insert(quittb, 0)
</pre>

<p>
Each of them has it's own tool buttons. 
</p>

<pre class="explanation">
 vbox = gtk.VBox(False, 0)
 vbox.pack_start(upper, False, False, 0)
 vbox.pack_start(lower, False, False, 0)
</pre>

<p>
Toolbars are packed into the vertical box, one after the other. 
</p>


<br>
<img src="/img/gui/pygtk/toolbars.png" alt="Toolbars">
<div class="figure">Figure: Toolbars</div>
<br>


<h2>Undo redo</h2>

<p>
The following example demonstrates, how we can inactivate toolbar buttons on the toolbar.
It is a common practise in GUI programming. For example the save button.
If we save all changes of our document to the disk, the save button is inactivated 
in most text editors. This way the application indicates to the user, 
that all changes are already saved. 
</p>

<div class="codehead">undoredo.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows how to 
# activate/deactivate a ToolButton
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Toolbar")
        self.set_size_request(250, 200)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)
        
        self.count = 2

        toolbar = gtk.Toolbar()
        toolbar.set_style(gtk.TOOLBAR_ICONS)

        self.undo = gtk.ToolButton(gtk.STOCK_UNDO)
        self.redo = gtk.ToolButton(gtk.STOCK_REDO)
        sep = gtk.SeparatorToolItem()
        quit = gtk.ToolButton(gtk.STOCK_QUIT)

        toolbar.insert(self.undo, 0)
        toolbar.insert(self.redo, 1)
        toolbar.insert(sep, 2)
        toolbar.insert(quit, 3)
        
        self.undo.connect("clicked", self.on_undo)
        self.redo.connect("clicked", self.on_redo)
        quit.connect("clicked", gtk.main_quit)

        vbox = gtk.VBox(False, 2)
        vbox.pack_start(toolbar, False, False, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        
    def on_undo(self, widget):
        self.count = self.count - 1

        if self.count <= 0:
            self.undo.set_sensitive(False)
            self.redo.set_sensitive(True)


    def on_redo(self, widget):
        self.count = self.count + 1

        if self.count >= 5: 
            self.redo.set_sensitive(False)
            self.undo.set_sensitive(True)
       
PyApp()
gtk.main()
</pre>

<p>
Our example creates undo and redo buttons from the PyGTK stock resources. 
After several clicks each of the buttons is inactivated. The buttons are grayed out.  
</p>

<pre class="explanation">
 self.count = 2
</pre>

<p>
The <b class="keyword">self.count</b> variable decides, which button is activated and
deactivated. 
</p>


<pre class="explanation">
 self.undo = gtk.ToolButton(gtk.STOCK_UNDO)
 self.redo = gtk.ToolButton(gtk.STOCK_REDO)
</pre>

<p>
We have two tool buttons. Undo and redo tool buttons. Images come from the stock
resources. 
</p>

<pre class="explanation">
 self.undo.connect("clicked", self.on_undo)
 self.redo.connect("clicked", self.on_redo)
</pre>

<p>
We plug a method for the <b class="keyword">clicked</b> signal for both tool buttons. 
</p>

<pre class="explanation">
 if self.count <= 0:
     self.undo.set_sensitive(False)
     self.redo.set_sensitive(True)
</pre>

<p>
To activate a widget, we use the <b class="keyword">set_sensitive()</b> 
method.
</p>


<br>
<img src="/img/gui/pygtk/undoredo.png" alt="Undo redo">
<div class="figure">Figure: Undo redo</div>

<hr class="btm">

<p>
In this chapter of the PyGTK programming library, we mentioned toolbars. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified February 8, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


